<template>
	<view class="content">
		<view class="top-bar">
			<view class="top-bar-left iconfont" @tap="back">&#xe614;</view>
			<view class="top-bar-center">{{friendMsg.name}}</view>
		</view>
		<scroll-view class="chat" scroll-y="true" :scroll-with-animation="swanition" :scroll-into-view="scrollVal"
		 upper-threshold="50" @scrolltoupper="nextPage">
			<view class="chat-main" :style="{paddingBottom: inputHeight + 'px'}">
				<view class="chat-ls" v-for="(item,index) in msgs" :key="index" :id="'msg'+index">
					<view class="chat-time">{{item.time}}</view>
					<view class="chat-msg msg-l" v-if="item.tip === 1">
						<navigator :url="'../userhome/userhome?id='+fid">
							<image class="user-icon" :src="friendMsg.imgurl">
						</navigator>
						<!-- <image class="user-icon" :src="friendMsg.imgurl"></image> -->
						<!-- 文字 -->
						<view class="msg" v-if="item.type == 0">
							<view class="msg-text">{{item.message}}</view>
						</view>
						<!-- 图片 -->
						<view class="msg" v-if="item.type == 1">
							<image class="msg-img" :src="item.message" mode="widthFix" @tap="previewImg"></image>
						</view>
						<!-- 音频 -->
						<view class="msg" v-if="item.type == 2">
							<view class="msg-text">
								<view class="msg msg-v" @tap="playVoice(item.message)">
									<view class="iconfont">&#xe667;</view>
									<view class="msg-v-t">{{item.vlength}}″</view>
								</view>
							</view>
						</view>
						<!-- 位置 -->
						<view class="msg" v-if="item.type == 3">
							<view class="msg-textmap">
								<view class="msg-map">
									<view class="map-name">{{item.message.name}}</view>
									<view class="map-address">{{item.message.address}}</view>
									<!-- <map class="map" :longitude="map.lo" :latitude="map.la"></map> -->
									<view class="map iconfont">&#xe608;</view>
								</view>
							</view>
						</view>
					</view>
					<view class="chat-msg msg-r" v-if="item.tip === 0">
						<navigator :url="'../userhome/userhome?id='+uid">
							<image class="user-icon" :src="uimgurl">
						</navigator>
						<!-- <image class="user-icon" :src="uimgurl"></image> -->
						<!-- 文字 -->
						<view class="msg" v-if="item.type == 0 ">
							<view class="msg-text">{{item.message}}</view>
						</view>
						<!-- 图片 -->
						<view class="msg" v-if="item.type == 1">
							<image class="msg-img" :src="item.message" mode="widthFix" @tap="previewImg"></image>
						</view>
						<!-- 音频 -->
						<view class="msg" v-if="item.type == 2">
							<view class="msg-text">
								<view class="msg msg-v" @tap="playVoice(item.message)">
									<view class="iconfont">&#xe667;</view>
									<view class="msg-v-t">{{item.vlength}}″</view>
								</view>
							</view>
						</view>
						<!-- 位置 -->
						<view class="msg" v-if="item.type == 3">
							<view class="msg-textmap">
								<view class="msg-map">
									<view class="map-name">{{item.message.name}}</view>
									<view class="map-address">{{item.message.address}}</view>
									<!-- <map class="map" :longitude="map.lo" :latitude="map.la"></map> -->
									<view class="map iconfont" @tap="openLocation(item.message)">&#xe608;</view>
									<!-- <image src="../../static/img/logo.png" mode="aspectFit" class="map"></image> -->
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="submit">
			<view class="submit-chat">
				<view class="btn-img iconfont" @tap="openSpk">
					&#xe8c0;
				</view>
				<textarea auto-height="true" class="submit-text" v-if="spkFlag === false" v-model="msg" @input="inputMsg" @focus="focusClose" />
				<view class="spk-btn" v-if="spkFlag === true" @touchstart="touchstart" @touchend="touchend" @touchmove="touchmove">按住说话</view>
				<view class="btn-img iconfont" @tap="showEmoji">
					&#xe650;
				</view>
				<view class="btn-img iconfont" @tap="showMore">
					&#xe64c;
				</view>
			</view>
			<!-- 表情 -->
			<view class="emoji" v-if="emojiFlag">
				<view class="emoji-send">
					<view class="emoji-send-del" @tap="emojiDelOne">删除</view>
					<view class="emoji-send-btn" @tap="sendMsgEmoji">发送</view>
				</view>
				<emoji @emotion="emotion"></emoji>
			</view>
			<!-- 图片位置等 -->
			<view class="more" v-if="moreFlag">
				<view class="more-list">
					<view class="more-item-icon iconfont" @tap="sendImg('album')">&#xe61e;</view>
					<view class="more-item-title">图片</view>
				</view>
				<view class="more-list">
					<view class="more-item-icon iconfont"  @tap="sendImg('camera')">&#xe63e;</view>
					<view class="more-item-title">拍照</view>
				</view>
				<view class="more-list">
					<view class="more-item-icon iconfont" @tap="chooseLocation">&#xe608;</view>
					<view class="more-item-title">位置</view>
				</view>
			</view>
		</view>
		<view class="voice-bg" v-if="voicebgFlag">
			<view class="voice-bg-len">
				<view class="voice-bg-time">{{vlength}}″</view>
			</view>
			<view class="voice-cancel">上滑取消录音</view>
		</view>
	</view>
</template>

<script>
	import emoji from '../../components/emoji/emoji.vue'
	import tools from '../../commons/js/tools.js'
	const recorderManager = uni.getRecorderManager()
	const innerAudioContext = uni.createInnerAudioContext()
	export default {
		data() {
			return {
				//用户信息
				uid: '',
				uimgurl: '',
				uname: '',
				mytoken: '',
				//好友id
				fid: '',
				friendMsg: {
					name: '',
					imgurl: ''
				},
				//聊天数据
				msgs: [],
				//预览图片数组
				imgArr: [
					"../../static/img/four.jpg"
				],
				type: 1,
				//开启语音说话
				spkFlag: false,
				//表情
				emojiFlag: false,
				//图片位置等
				moreFlag: false,
				//开启或者关闭滚动
				swanition: true,
				//滚动需要定位的id
				scrollVal: '',
				//输入框数据
				msg: '',
				//聊天页面距离底部的高度
				inputHeight: '60',
				//获取到的高度
				getHeight: '',
				//语音定时器
				timer: '',
				//语音长度
				vlength: 0,
				//控制语音显示与隐藏
				voicebgFlag: false,
				//语音页面y值
				pageY: 0,
				//页码
				nowpage: 0,
				//每页条数
				pagesize: 10,
				imgMsg: []
			}
		},
		onLoad(e) {
			this.fid = e.id
			this.getStorages()
			this.getFriendMsg()
			this.getMsg()
			this.receiveSocketMsg()
			this.clearUnreadMsg()
		},
		onShow() {
			try {
			    const value = uni.getStorageSync('user')
			    if (value) {
			        this.storageData = value
			    }
			} catch (e) {
			    // error
			}
			if(!this.storageData.token){
				uni.navigateTo({
					url: '../login/login'
				})
			}else{
				
			}
		},
		components:{
			emoji
		},
		methods: {
			//把未读消息数清零
			clearUnreadMsg(){
				uni.request({
					url: this.baseURL + '/index/updatemsg',
					data: {
						uid: this.fid,
						fid: this.uid,
					},
					method: 'POST',
					success: (data) => {
						let status = data.data.status
						if (status === 200) {
							//成功
						} else if (status === 500) {
							uni.showToast({
								title: '服务器发生错误!',
								icon: 'none',
								duration: 2000
							})
						}
					}
				})
			},
			//获取本地缓存
			getStorages: function() {
				try {
				    const value = uni.getStorageSync('user');
				    if (value) {
				        this.uid = value.id
						this.uimgurl = this.baseURL+value.imgurl
						this.uname = value.name
						this.mytoken = value.token
				    }
				} catch (e) {
					//没有缓存跳转到登录页面
				    uni.navigateTo({
				    	url: '../index/index'
				    })
				}
			},
			//获取好友信息
			getFriendMsg: function() {
				uni.request({
					url: this.baseURL + '/user/detail',
					data: {
						id: this.fid,
					},
					method: 'POST',
					success: (data) => {
						let status = data.data.status
						if (status === 200) {
							let res = data.data.result
							this.friendMsg.name = res.name
							this.friendMsg.imgurl = this.baseURL+res.imgurl
						} else if (status === 500) {
							uni.showToast({
								title: '服务器发生错误!',
								icon: 'none',
								duration: 2000
							})
						}
					}
				})
			},
			//获取聊天数据
			getMsg(){
				uni.request({
					url: this.baseURL + '/chat/msg',
					data: {
						uid: this.uid,
						fid: this.fid,
						nowPage: this.nowpage,
						pageSize: this.pagesize
					},
					method: 'POST',
					success: (data) => {
						let status = data.data.status
						if (status === 200) {
							let res = data.data.result
							if(res.length>0){
								for(let i=0;i<res.length;i++){
									res[i].imgurl = this.baseURL + res[i].imgurl
									res[i].time = tools.resgiterDate(res[i].time)
									if(res[i].fromID === this.uid){
										res[i].tip = 0
									}else if(res[i].fromID === this.fid){
										res[i].tip = 1
									}
									//如果信息是图片
									if(res[i].type == 1){
										res[i].message = this.baseURL + res[i].message
										this.imgArr.unshift(res[i])
									}
									//如果信息是语音
									if(res[i].type == 2){
										let msgst = JSON.parse(res[i].message)
										res[i].vlength = msgst.vlength
										res[i].message = this.baseURL + msgst.msg
									}
									//如果信息是位置
									if(res[i].type == 3){
										res[i].message = JSON.parse(res[i].message)
									}
									this.msgs = res
								}
							}
							this.swanition = false
							this.scrollVal = ''
							this.$nextTick(function(){
								let len = this.msgs.length-1
								this.scrollVal = 'msg'+len
							})
							this.pagesize += 10
							// //页数加1
							// this.$nextTick(function(){
								
							// 	this.pagesize += 10
							// })
						} else if (status === 500) {
							uni.showToast({
								title: '服务器发生错误!',
								icon: 'none',
								duration: 2000
							})
						}
					}
				})
			},
			nextPage(){
				uni.request({
					url: this.baseURL + '/chat/msg',
					data: {
						uid: this.uid,
						fid: this.fid,
						nowPage: this.nowpage,
						pageSize: this.pagesize
					},
					method: 'POST',
					success: (data) => {
						//页数加1
						let status = data.data.status
						if (status === 200) {
							let res = data.data.result
							if(res.length>0){
								for(let i=0;i<res.length;i++){
									res[i].imgurl = this.baseURL + res[i].imgurl
									res[i].time = tools.resgiterDate(res[i].time)
									if(res[i].fromID === this.uid){
										res[i].tip = 0
									}else if(res[i].fromID === this.fid){
										res[i].tip = 1
									}
									//如果信息是图片
									if(res[i].type == 1){
										res[i].message = this.baseURL + res[i].message
										this.imgArr.unshift(res[i])
									}
									//如果信息是语音
									if(res[i].type == 2){
										let msgst = JSON.parse(res[i].message)
										res[i].vlength = msgst.vlength
										res[i].message = this.baseURL + msgst.msg
									}
									//如果信息是位置
									if(res[i].type == 3){
										res[i].message = JSON.parse(res[i].message)
									}
									this.msgs = res
								}
							}
							// //判断nowpage
							// if(res.length > this.pagesize){
							// 	this.nowpage++
							// }else{
							// 	//数据全部获取完
							// 	this.nowpage = -1
							// }
							this.pagesize += 10
						} else if (status === 500) {
							uni.showToast({
								title: '服务器发生错误!',
								icon: 'none',
								duration: 2000
							})
						}
					}
				})
			},
			//获取页面高度
			getElementHeight: function() {
				const query = uni.createSelectorQuery().in(this);
					query.select('.submit').boundingClientRect(data => {
						this.getHeight = data.height
					}).exec()
			},
			//返回上一级
			back: function() {
				uni.navigateBack({
					delta: 1
				})
			},
			// 预览图片
			previewImg(e){
				let index = 0
				for(let i=0;i<this.imgArr.length;i++){
					if(this.imgArr[i] === e){
						index = i
					}
				}
				uni.previewImage({
					current: index,
					urls: this.imgArr,
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {},
						fail: function(err) {}
					}
				});
			},
			//切换语音和键盘
			openSpk(){
				this.moreFlag = false
				this.emojiFlag = false
				this.spkFlag = !this.spkFlag
				setTimeout(()=>{
					this.getElementHeight()
					this.inputHeight = this.getHeight
				},10)
			},
			//表情
			showEmoji(){
				this.moreFlag = false
				this.spkFlag = false
				this.emojiFlag = !this.emojiFlag
				setTimeout(()=>{
					this.getElementHeight()
					this.inputHeight = this.getHeight
					this.scrollVal = ''
					this.swanition = false
					this.$nextTick(function(){
						let len = this.msgs.length-1
						this.scrollVal = 'msg'+len
					})
				},10)
			},
			//图片位置
			showMore(){
				this.emojiFlag = false
				this.spkFlag = false
				this.moreFlag = !this.moreFlag
				setTimeout(()=>{
					this.getElementHeight()
					this.inputHeight = this.getHeight
					this.scrollVal = ''
					this.swanition = false
					this.$nextTick(function(){
						let len = this.msgs.length-1
						this.scrollVal = 'msg'+len
					})
				},10)
			},
			//发送图片
			sendImg(e){
				let count
				if(e === 'album'){
					count = 9
				}else{
					count = 1
				}
				uni.chooseImage({
				    count: count, //默认9
				    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				    sourceType: [e], //从相册选择
				    success: (res) => {
						const filePaths = res.tempFilePaths
						for(let i=0;i<filePaths.length;i++){
							//let filetype = res.tempFiles[i].name.replace(/.+\./,'.')
							let data = {
								msg: filePaths[i],
								type: 1,
								//filetype: filetype
							}
							this.sendMsg(data,this.uid,this.uimgurl,0)
						}
				    }
				});
				
			},
			//开始录音
			touchstart(e){
				this.pageY = e.changedTouches[0].pageY
				this.voicebgFlag = true
				let i = 0
				this.timer = setInterval(()=>{
					i++
					if(i<=1){
						this.vlength = 1
					}else{
						this.vlength = i
					}
					if(i>60){
						clearInterval(this.timer) 
						this.touchend()
					}
				},1000)
				recorderManager.start()
			},
			//结束录音
			touchend(){
				clearInterval(this.timer)
				recorderManager.stop()
				recorderManager.onStop((res)=>{
					this.voiceURL = res.tempFilePath
					let msg = {
						msg: res.tempFilePath,
						vlength: this.vlength,
					}
					let msgs = JSON.stringify(msg)
					let data = {
						msg: msgs,
						type: 2
					}
					if(this.voicebgFlag === true){
						this.sendMsg(data,this.uid,this.uimgurl,0)
					}
					this.vlength = 0
					this.voicebgFlag = false
				})
			},
			//终止录音
			touchmove(e){
				if(this.pageY - e.changedTouches[0].pageY>100){
					this.voicebgFlag = false
					this.touchend()
				}
			},
			//音频播放
			playVoice(e){
				if(e){
					innerAudioContext.src = e
				}else{
					innerAudioContext.src = this.voiceURL
				}
				innerAudioContext.play()
			},
			//发送位置
			chooseLocation(){
				uni.chooseLocation({
				    success: (res) => {
						let data = {
							name: res.name,
							address: res.address,
							latitude: res.latitude,
							longitude: res.longitude
						}
						let stringData = JSON.stringify(data)
						let e = {
							msg: stringData,
							type: 3
						}
						this.sendMsg(e,this.uid,this.uimgurl,0)
				    }
				});
			},
			//读取位置
			openLocation(e){
				uni.openLocation({
				    latitude: e.latitude,
				    longitude: e.longitude,
					name: e.name,
					address: e.address,
				    success: function () {}
				});
			},
			//接受表情
			emotion(e){
				this.msg = this.msg+e
			},
			//发送方法
			send(msg,type){
				let data = {
					message: msg,
					type: type
				}
				this.msg = ''
				this.msgs.push(data)
				
			},
			//接受输入内容
			inputMsg(e){
				var data={
					msg: e.detail.value,
					type: 0
				}
				var pos = e.detail.value.indexOf('\n')
				if(pos!=-1 && e.detail.value.length>1){
					this.sendMsg(data,this.uid,this.uimgurl,0)
				}
				
			},
			//发送文字
			sendMsg(e,id,img,tip){
				//用tip分辨是谁发的 0自己发 1别人发
				let data = {
					tip: 0,
					fromId: id,
					imgurl: img,
					type: e.type,
					message: e.msg,
					time: tools.resgiterDate(new Date())
				}
				if(data.type == 2){
					data.message = JSON.parse(data.message)
					data.vlength = data.message.vlength
					data.message = data.message.msg
				}
				if(data.type == 3){
					data.message = JSON.parse(data.message)
				}
				this.msgs.push(data)
				if(data.type == 3){
					let stringData = JSON.stringify(data.message)
				}
				//socket提交
				if(e.type == 0 || e.type == 3){
					this.sendSocket(e)
				}
				if(e.type == 1){
					this.imgArr.push(e.msg)
					//当前日期的文件夹
					let url = tools.fileName(new Date())
					//提交图片
					uni.uploadFile({
						url: this.baseURL+'/files/upload', //仅为示例，;ui非真实的接口地址
						filePath: e.msg,
						name: 'file',
						//fileType: 'image',
						formData: {
							url: url,
							name: new Date().getTime() + this.uid + Math.ceil(Math.random()*10)
						},
						success: (uploadFileRes) => {
							let data = {
								msg: uploadFileRes.data,
								type: 1
							}
							this.sendSocket(data)
						}
					})
							
				}
				if(e.type == 2){
					//当前日期的文件夹
					let url = tools.fileName(new Date())
					let msgj = JSON.parse(e.msg)
					//提交音频
					uni.uploadFile({
						url: this.baseURL+'/files/upload', //仅为示例，;ui非真实的接口地址
						filePath: msgj.msg,
						name: 'file',
						fileType: 'image',
						formData: {
							url: url,
							name: new Date().getTime() + this.uid + Math.ceil(Math.random()*10)
						},
						success: (uploadFileRes) => {
							let voicedata = {
								msg: uploadFileRes.data,
								vlength: msgj.vlength
							}
							let voicedatas = JSON.stringify(voicedata)
							let data = {
								msg: voicedatas,
								type: 2
							}
							this.sendSocket(data)
						}
					})
							
				}
				setTimeout(()=>{
					this.goBottom()
				},0)
				this.msg = ''
			},
			//聊天数据发送后端
			sendSocket(e){
				this.socket.emit('msg',e,this.uid,this.fid)
			},
			//socket聊天数据接收
			receiveSocketMsg(){
				this.socket.on('msg',(msg,fromid,tip)=>{
					if(fromid === this.fid && tip === 0){
						if(msg.type == 1){
							msg.msg = this.baseURL+msg.msg
						}
						if(msg.type == 2){
							let msgjs = JSON.parse(msg.msg)
							msg.msg = this.baseURL + msgjs.msg
						}
						if(msg.type == 3){
							msg.msg = JSON.parse(msg.msg)
						}
						let data = {
							tip: 1,
							fromId: fromid,
							imgurl: this.friendMsg.imgurl,
							type: msg.type,
							message: msg.msg,
							time: tools.resgiterDate(new Date())
						}
						this.msgs.push(data)
						this.goBottom()
						uni.request({
							url: this.baseURL + '/index/updatemsg',
							data: {
								uid: this.fid,
								fid: this.uid
							},
							method: 'POST',
							success: (data) => {}
						})
						// if(msg.type === 1){
						// 	this.imgMsg.push(this.serverUrl+msg.message)
						// }
					}
				})
			},
			//表情内的发送信息
			sendMsgEmoji(){
				let data = {
					msg: this.msg,
					type: 0
				}
				if(this.msg.length>0){
					this.sendMsg(data,this.uid,this.uimgurl,0)
				}
			},
			//表情内删除一格
			emojiDelOne(){
				if(this.msg.length>0){
					this.msg = this.msg.substring(0,this.msg.length-1)
				}
			},
			//聚焦输入框后关闭表情
			focusClose(){
				this.emojiFlag = false
				this.moreFlag = false
				setTimeout(()=>{
					this.getElementHeight()
					this.inputHeight = this.getHeight
				},10)
			},
			//滚动到底部
			goBottom(){
				this.swanition = true
				this.scrollVal = ''
				this.$nextTick(function(){
					let len = this.msgs.length-1
					this.scrollVal = 'msg'+len
				})
			}
		}
	}
</script>

<style lang="scss">
	@import '../../commons/css/style.scss';

	page {
		height: 100%;
	}

	.content {
		height: 100%;
		background-color: #f4f3f4;
	}
	uni-scroll-view{
		background-color: #f4f3f4;
		height: 100%;
	}
	.top-bar {
		justify-content: flex-start;
		border-bottom: 1px solid $uni-border-color;
		position: fixed;
		background-color: #f5f4f5;

		.top-bar-left {
			width: 88rpx;
			height: 88rpx;
			line-height: 88rpx;
			padding-left:10rpx;

			image {
				margin: 21rpx 0 0 21rpx;
				width: 60rpx;
				height: 60rpx;
			}
		}

		.top-bar-center {
			padding-top: var(--status-bar-height);
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}
	}

	.chat {
		//padding-bottom: env(safe-area-inset-bottom);
		.chat-main {
			padding-top: 120rpx;
			padding-left: 32rpx;
			padding-right: 32rpx;
			display: flex;
			flex-direction: column;
			//margin-bottom: env(safe-area-inset-bottom);
		}

		.chat-ls {
			.chat-time {
				padding: 20rpx 0;
				font-size: 24rpx;
				line-height: 34rpx;
				color: #999999;
				text-align: center;
			}

			.chat-msg {
				display: flex;
				padding: 20rpx 0;

				.user-icon {
					width: 80rpx;
					height: 80rpx;
					border-radius: 20rpx;
				}

				.msg {
					max-width: 480rpx;

					.msg-text {
						font-size: $uni-font-size-lg;
						line-height: 44rpx;
						padding: 16rpx 24rpx;
					}

					.msg-img {
						max-width: 400rpx;
						border-radius: 20rpx;
					}
					
					.msg-map{
						background-color: #FFFFFF;
						width: 464rpx;
						height: 284rpx;
						overflow: hidden;
						.map-name{
							font-size: $uni-font-size-lg;
							line-height: 44rpx;
							padding: 18rpx 24rpx 0 24rpx;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 1;
							overflow: hidden;
						}
						.map-address{
							font-size: $uni-font-size-sm;
							color: $uni-text-color-disable;
							padding: 0 24rpx;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 1;
							overflow: hidden;
						}
						.map{
							width: 464rpx;
							height: 200rpx;
							line-height: 200rpx;
							text-align: center;
							background-color: #1a935f;
						}
					}
				}
			}

			.msg-l {
				flex-direction: row;

				.msg-text {
					margin-left: 16rpx;
					background-color: #FFFFFF;
					border-radius: 0rpx 20rpx 20rpx 20rpx;
				}
				
				.msg-v{
					display: flex;
					.msg-v-t{
						padding-left: 20rpx;
					}
				}

				.msg-img {
					margin-left: 16rpx;
				}
				
				.msg-map {
					margin-left: 16rpx;
					border-radius: 0rpx 20rpx 20rpx 20rpx;
				}
			}

			.msg-r {
				flex-direction: row-reverse;

				.msg-text {
					margin-right: 16rpx;
					background-color: #27d68d;
					border-radius: 20rpx 0rpx 20rpx 20rpx;
				}
				.msg-v{
					display: flex;
					.msg-v-t{
						padding-left: 20rpx;
					}
				}
				.msg-img {
					margin-right: 16rpx;
				}
				
				.msg-map {
					margin-right: 16rpx;
					border-radius: 20rpx 0rpx 20rpx 20rpx;
				}
			}
		}
	}
	.submit{
		width: 100%;
		border-top: 1px solid $uni-border-color;
		position: fixed;
		bottom: 0;
		z-index: 1001;
		padding-bottom: env(safe-area-inset-bottom);
		//padding-bottom: 10rpx;
		background-color: #f4f3f4;
		.submit-chat{
			width: 100%;
			display: flex;
			align-items: flex-end;
			justify-content: space-between;
			box-sizing: border-box;
			flex-wrap: nowrap;
			padding: 14rpx 14rpx;
			.btn-img{
				image{
					width: 56rpx;
					height: 56rpx;
					margin: 0 10rpx;
				}
			}
			
			.submit-text{
				background-color: #FFFFFF;
				border-radius: 10rpx;
				padding: 16rpx;
				max-height: 160rpx;
				margin: 0 10rpx;
			}
			.spk-btn{
				width: 460rpx;
				background-color: #FFFFFF;
				border-radius: 10rpx;
				padding: 18rpx;
				max-height: 160rpx;
				margin: 0 10rpx;
				text-align: center;
				font-size: $uni-font-size-base;
				color: #000000;
				font-weight: 600;
			}
		}
		.emoji{
			z-index: 9999;
			width: 100%;
			height: 460rpx;
			background-color: #e3e3e3;
			overflow: hidden;
			overflow-y: auto;
			.emoji-send{
				width: 262rpx;
				height: 132rpx;
				position: fixed;
				right: 0;
				bottom: 0;
				display: flex;
				align-items: center;
				background: rgba(227,227,227,0.9);
				.emoji-send-del{
					margin: 0 20rpx;
					height: 80rpx;
					width: 100rpx;
					line-height: 80rpx;
					background-color: #FFFFFF;
					font-size: 28rpx;
					text-align: center;
					border-radius: 12rpx;
					font-weight: 600;
				}
				.emoji-send-btn{
					height: 80rpx;
					width: 100rpx;
					line-height: 80rpx;
					background-color: #FFFFFF;
					font-size: 28rpx;
					text-align: center;
					border-radius: 12rpx;
					font-weight: 600;
				}
			}
		}
	}
	.more{
		width: 100%;
		height: 460rpx;
		background-color: #e3e3e3;
		display: flex;
		padding: 40rpx 0 0 40rpx;
		.more-list{
			text-align: center;
			padding-right: 30rpx;
			.more-item-icon{
				height: 120rpx;
				line-height: 120rpx;
				width: 120rpx;
				background-color: #FFFFFF;
				border-radius: 24rpx;
			}
			.more-item-title{
				padding-top: 10rpx;
				font-size: 30rpx;
				text-align: center;
			}
		}
		
	}
	.voice-bg{
		width: 100%;
		height: 100%;
		background-color: rgba(0,0,0,0.4);
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1000;
		.voice-bg-len{
			height: 84rpx;
			width: 500rpx;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
			background-color: #FFFFFF;
			border-radius: 42rpx;
			text-align: center;
			.voice-bg-time{
				line-height: 84rpx;
				font-weight: 600;
			}
		}
		.voice-cancel{
			width: 100%;
			position: absolute;
			bottom: 40%;
			color: #FFFFFF;
			text-align: center;
			letter-spacing: 2rpx;
			font-size: $uni-font-size-lg;
			font-weight: 600;
		}
	}
</style>
